<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>优贷云 - 实名认证管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css">
    <style>
        .layui-layout-admin .layui-header {
            background: linear-gradient(120deg, #3498db, #2980b9) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .layui-logo {
            color: #fff !important;
            font-weight: 500;
            font-size: 18px;
        }

        .layui-nav {
            background: transparent !important;
        }

        .layui-side {
            background: #fff !important;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
        }

        .layui-side .layui-nav {
            background: #fff !important;
        }

        .layui-nav-tree .layui-nav-item a {
            color: #666 !important;
        }

        .layui-nav-tree .layui-this>a {
            background: linear-gradient(120deg, #3498db, #2980b9) !important;
            color: #fff !important;
        }

        .auth-list {
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .auth-card {
            width: calc(33.33% - 20px);
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            min-height: 420px;
            display: flex;
            flex-direction: column;
        }

        .auth-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .auth-card-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
            background: #f8f9fa;
        }

        .auth-card-header h3 {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin: 0;
        }

        .auth-card-header span {
            font-size: 13px;
            color: #909399;
        }

        .auth-card-header .time-info {
            font-size: 13px;
            color: #909399;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .auth-card-header .time-info i {
            font-size: 14px;
        }

        .auth-card-body {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .auth-card-footer {
            padding: 15px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            background: #f8f9fa;
        }

        .auth-info {
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            line-height: 24px;
        }

        .auth-info-label {
            width: 80px;
            color: #909399;
            flex-shrink: 0;
            font-size: 14px;
        }

        .auth-info-content {
            flex: 1;
            color: #303133;
            font-size: 14px;
        }

        .auth-images {
            display: flex;
            gap: 10px;
            margin-top: auto;
            padding-top: 15px;
        }

        .auth-images img {
            width: calc(50% - 5px);
            height: 140px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #ebeef5;
            transition: all 0.3s;
        }

        .auth-images img:hover {
            transform: scale(1.02);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .status-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .status-0 {
            background: #E6A23C20;
            color: #E6A23C;
        }

        .status-1 {
            background: #67C23A20;
            color: #67C23A;
        }

        .status-2 {
            background: #F56C6C20;
            color: #F56C6C;
        }

        .search-box {
            padding: 20px;
            background: #fff;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .page-box {
            padding: 20px;
            text-align: center;
        }

        .img-preview {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 19891019;
        }

        .img-preview img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 4px;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <div class="layui-header">
            <div class="layui-logo">优贷云</div>
            {% include "back/templates/admin/common/header-user.html" %}
        </div>

        <!-- 左侧导航栏 -->
        {% include "back/templates/admin/common/menu.html" %}

        <!-- 内容主体区域 -->
        <div class="layui-body">
            <!-- 搜索区域 -->
            <div class="search-box">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">审核状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0">待审核</option>
                                    <option value="1">已通过</option>
                                    <option value="2">已拒绝</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchForm">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 认证列表区域 -->
            <div class="auth-list" id="authList">
                <!-- 卡片将通过 JS 动态生成 -->
            </div>

            <!-- 分页区域 -->
            <div class="page-box" id="pageBox"></div>
        </div>

        <!-- 底部固定区域 -->
        <div class="layui-footer">
            © 2024 优贷云管理系统
        </div>
    </div>

    <!-- 图片预览容器 -->
    <div class="img-preview" id="imgPreview">
        <img src="" alt="预览图片">
    </div>

    <script src="/static/admin/layui/layui.js"></script>
    <script>
        // 图片预览函数
        function previewImg(src) {
            const preview = document.getElementById('imgPreview');
            const img = preview.querySelector('img');
            img.src = src;
            preview.style.display = 'flex';

            preview.onclick = function () {
                this.style.display = 'none';
            }
        }

        layui.use(['element', 'form', 'layer', 'laypage'], function () {
            var element = layui.element
                , $ = layui.$
                , form = layui.form
                , layer = layui.layer
                , laypage = layui.laypage;

            // 获取认证列表数据
            function getAuthList(page = 1, searchParams = {}) {
                // 构建查询参数
                const queryParams = {
                    page: page,
                    limit: 9,
                    ...searchParams
                }

                // 发起API请求
                $.ajax({
                    url: '/api/user/get_in_auth_list/',
                    type: 'GET',
                    data: queryParams,
                    success: function (res) {
                        if (res.code === 200) {
                            // 渲染列表和分页
                            renderAuthList(res.data);
                            renderPagination(page, Math.ceil(res.count / 9));
                        } else {
                            layer.msg(res.msg || '获取数据失败');
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.msg('网络请求失败');
                        console.error('获取认证列表失败:', error);
                    }
                });
            }

            // 判断审核状态
            function getAuthStatus(status) {
                if (status === 0) {
                    return '未审核';
                } else if (status === 1) {
                    return '已通过';
                } else {
                    return '已拒绝';
                }
            }

            // 渲染认证列表
            function renderAuthList(data) {
                const authList = document.getElementById('authList');
                if (!data || data.length === 0) {
                    authList.innerHTML = `
                        <div style="width:100%;text-align:center;padding:50px 0;color:#999;">
                            <i class="layui-icon" style="font-size:50px;color:#ccc;">&#xe69c;</i>
                            <p style="margin-top:10px;">暂无数据</p>
                        </div>
                    `;
                    return;
                }

                authList.innerHTML = data.map(item => `
                    <div class="auth-card">
                        <div class="status-badge status-${item.user_info.user_is_authenticated}">
                            ${getAuthStatus(item.user_info.user_is_authenticated)}

                        </div>
                        <div class="auth-card-header">
                            <h3>申请人：${item.name}</h3>
                            <div class="time-info">
                                <i class="layui-icon">&#xe637;</i>
                                <span>提交时间：${formatDateTime(item.create_time)}</span>
                            </div>
                        </div>
                        <div class="auth-card-body">
                            <div class="auth-info">
                                <span class="auth-info-label">真实姓名：</span>
                                <span class="auth-info-content">${item.name}</span>
                            </div>
                            <div class="auth-info">
                                <span class="auth-info-label">身份证号：</span>
                                <span class="auth-info-content">${formatIDCard(item.idCard)}</span>
                            </div>
                            <div class="auth-info">
                                <span class="auth-info-label">手机号：</span>
                                <span class="auth-info-content">${formatPhone(item.user_info.phone)}</span>
                            </div>
                            <div class="auth-info">
                                <span class="auth-info-label">审核时间：</span>
                                <span class="auth-info-content">${item.verify_time ? formatDateTime(item.verify_time) : '--'}</span>
                            </div>
                            <div class="auth-info">
                                <span class="auth-info-label">审核备注：</span>
                                <span class="auth-info-content">${item.verify_remark || '--'}</span>
                            </div>
                            <div class="auth-images">
                                <img src="${item.id_card_front_image}" onclick="previewImg(this.src)" alt="身份证正面">
                                <img src="${item.id_card_back_image}" onclick="previewImg(this.src)" alt="身份证反面">
                            </div>
                        </div>
                        <div class="auth-card-footer">
                            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="verifyAuth(${item.id})">
                                    <i class="layui-icon">&#xe6b2;</i> 审核
                                </button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="viewDetail(${JSON.stringify(item).replace(/"/g, '&quot;')})">
                                <i class="layui-icon">&#xe63c;</i> 详情
                            </button>
                        </div>
                    </div>
                `).join('');
            }

            // 格式化日期时间
            function formatDateTime(datetime) {
                if (!datetime) return '';
                return datetime.replace('T', ' ').split('.')[0];
            }

            // 格式化身份证号(中间部分用*代替)
            function formatIDCard(idCard) {
                if (!idCard) return '';
                return idCard.replace(/^(.{6})(?:\d+)(.{4})$/, '$1********$2');
            }

            // 格式化手机号(中间4位用*代替)
            function formatPhone(phone) {
                if (!phone) return '';
                return phone.replace(/^(.{3})(?:\d+)(.{4})$/, '$1****$2');
            }

            // 渲染分页
            function renderPagination(current, pages) {
                laypage.render({
                    elem: 'pageBox',
                    count: pages * 9,
                    limit: 9,
                    curr: current,
                    jump: function (obj, first) {
                        if (!first) {
                            getAuthList(obj.curr, form.val('searchForm'));
                        }
                    }
                });
            }

            // 审核操作
            window.verifyAuth = function (id) {
                layer.open({
                    type: 1,
                    title: '实名认证审核',
                    area: ['500px', '400px'],
                    content: `
                    <div class= "layui-form" lay-filter="verifyForm" style = "padding: 20px;" >
                    <div class="layui-form-item">
                        <label class="layui-form-label">审核结果</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="通过" checked>
                                <input type="radio" name="status" value="2" title="拒绝">
                                </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">审核备注</label>
                            <div class="layui-input-block">
                                <textarea name="verify_remark" placeholder="请输入审核备注" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>`,

                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        const verifyData = form.val('verifyForm');
                        verifyData.user_id = id;
                        $.ajax({
                            url: '/api/user/auth_list/',
                            type: 'GET',
                            data: verifyData,
                            success: function (res) {
                                if (res.code === 200) {
                                    layer.msg('审核成功');
                                    getAuthList();
                                    layer.close(index);
                                } else {
                                    layer.msg(res.msg || '审核失败');
                                }
                            }
                        });
                    }
                });
                form.render(null, 'verifyForm');
            }

            // 查看详情
            window.viewDetail = function (data) {
                layer.open({
                    type: 1,
                    title: '实名认证详情',
                    area: ['800px', '600px'],
                    content: `
                    <div style = "padding: 20px; line-height: 22px;">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <p><b>用户名：</b>${data.user_info.name}</p>
                                    <p><b>真实姓名：</b>${data.name}</p>
                                    <p><b>身份证号：</b>${data.idCard}</p>
                                    <p><b>手机号：</b>${data.user_info.phone}</p>
                                    <p><b>提交时间：</b>${data.create_time}</p>
                                    <p><b>审核状态：</b>${data.is_audit ? '已通过' : "待审核"}</p>
                                    <p><b>审核时间：</b>${data.verify_time || '--'}</p>
                                    <p><b>审核备注：</b>${data.verify_remark || '--'}</p>
                                </div>
                            </div>
                            <div class="layui-row" style="margin-top: 15px;">
                                <div class="layui-col-md6">
                                    <p><b>身份证正面：</b></p>
                                    <img src="${data.id_card_front_image}" style="max-width: 100%;" onclick="previewImg(this.src)">
                                </div>
                                <div class="layui-col-md6">
                                    <p><b>身份证反面：</b></p>
                                    <img src="${data.id_card_back_image}" style="max-width: 100%;" onclick="previewImg(this.src)">
                                </div>
                            </div>
                        </div >
                    `,
                    shadeClose: true
                });
            }

            // 搜索表单提交
            form.on('submit(searchForm)', function (data) {
                getAuthList(1, data.field);
                return false;
            });

            // 初始加载
            getAuthList();
        });
    </script>
</body>

</html> `